<template>
	<view :style="{'--color':color}">



		<view class="bgwhite padding30-40 m-bot20" v-if="pageData.store_id && !pageData.shops">
			<view class="d-flex j-sb a-center">
				<view class="d-flex">
					<image :src="$imgUrls(pageData.shop_logo)" mode="aspectFit" class="logo"></image>
					<view class="p-left30 d-flex f-column j-sb">
						<view class="color_22 size28 bold">{{ pageData.shopName }}</view>
						<view class="color_77 size22 bold400">在售商品<text
								class="color_22 bold m-left4 m-right4">{{ pageData.shopGoodsCount }}</text>件</view>
					</view>
				</view>
				<view class="d-flex a-center" @click="toStore(pageData.store_id)" v-if="scan == 0">
					<text class="color_22 h6 bold500 m-right10">进入店铺</text>
					<text class="iconfont icon-xiangyouxiayiye color_22 h6"></text>
				</view>
			</view>
		</view>


		<block v-if="pageData.shops && showType == 1">
			<view class="List" v-if="storeItem" >
				<view class="logoBox flexac m-right20" v-if="storeItem.logo">
					<image :src="$imgUrls(storeItem.logo)" mode="aspectFill" class="logo"></image>
				</view>
				<view class="flex-1 d-flex f-column ">
					<view class="row j-sb">
						<view class="d-flex a-center">
							<view class="d-flex f-column">
								<text class="size26 black bold">{{storeItem.name}}</text>
								<view class="d-flex a-center m-top10">
									<text class="h6 color_99 m-right14" v-if="storeItem.goods_num > 0">在售{{storeItem.goods_num}}件</text>
									<text class="h6 color_99"
										v-if="storeItem.distance">距离{{$pop.formatDistance(storeItem.distance)}}</text>
								</view>
							</view>
						</view>
						<view class="d-flex f-column">
							<view class="d-flex a-center color_33 h6">
										<text class="m-right10" @click.stop="toStore(storeItem.shop_id)">进入店铺</text>
										<text class="iconfont icon-xiangyouxiayiye color_22 h6"></text>
									</view>
							<view class="switchBtn m-top10" @click.stop="selectStore">切换门店</view>
						</view>
					</view>
					<text class="h6 color_99 ellipsis m-top8">{{storeItem.address}}</text>
				</view>
			</view>
		</block>

		<block v-if="pageData.shops && showType == 2">
			<view class="newList " v-if="storeItem" @click="toStore(storeItem.shop_id)">
				<view class="logoBoxs flexac m-right20" v-if="storeItem.logo">
					<image :src="$imgUrls(storeItem.logo)" mode="aspectFill" class="logos"></image>
				</view>
				<view class="d-flex a-center">
					<view class="Direct" v-if="storeItem.main_store == 1">直营门店</view>
					<text class="black size40 bold storeName ellipsis">{{storeItem.name}}</text>
				</view>

				<view class="row a-center m-top10">
					<view class="d-flex a-center color bold m-right20" v-if="storeItem.score && storeItem.score > 0">
						<text class="size32">{{storeItem.score}}</text>
						<text class="h6">分</text>
					</view>
					<text class="h6 m-right20 color_66" v-if="storeItem.sales_num">月销量{{storeItem.sales_num}}</text>
					<text class="h6 m-right20 color_66" v-if="storeItem.favorable > 0">好评{{storeItem.favorable}}%</text>
					<text class="h6  color_66"
						v-if="storeItem.distance">距离{{$pop.formatDistance(storeItem.distance)}}</text>
				</view>
				<view class="row a-center">
					<view class="flex-1 d-flex a-center p-right14 color_66">
						<text class="iconfont icon-B size38 m-right10"></text>
						<text class="size26 flex-1 ellipsis ">{{storeItem.address}}</text>
					</view>
					<view class="d-flex a-center  switchContact">
						<view class="iconfont icon-dianhua size36 padding10-26"
							@click.stop="$common.Tel(storeItem.phone)"></view>
						<view class="switchBtn" @click.stop="selectStore">切换门店</view>
					</view>
				</view>
			</view>
		</block>



	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		name: 'Store',
		props: ['pageData', 'scan', 'shop_id', 'showType'],
		data() {
			return {
				show: false,
				entrepotShopId: null,
			}
		},
		
		methods: {

			toStore(store_id) {
				this.toUrl(`/pages/store/storeIndex?shop_id=${store_id}`)
			},
			toggleStore(shop_id) {
				this.show = false;
				this.setShopId(shop_id)
			},
			selectStore(){
				let ids = [];
				this.pageData.shops.forEach(item=>{
					ids.push(item.shop_id)
				})
				this.toUrl(`/otherPage/custom/selectStore?shopsid=${ids.join()}`)
			}
		},
		computed: {
			...mapState(['color']),
			currentShop_id() {
				return this.shop_id || (this.pageData && this.pageData.shops.length > 0 ? this.pageData.shops[0]
					.shop_id : null);
			},
			storeItem() {
				if (!this.pageData || !this.currentShop_id) return null;
				const result = this.pageData.shops.find(n => n.shop_id == this.currentShop_id);
				if (result) {
					this.$emit('storeItem', result);
				}

				return result;
			},
			
		},
		watch: {
			currentShop_id: {
				deep: true,
				immediate: true,
				handler(newValue) {
					if (newValue) uni.setStorageSync('shop_id', newValue);
				}
			},
		}

	}
</script>

<style lang="scss" scoped>
	.List {
		width: 100%;
		background-color: #fff;
		padding: 20rpx 10rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.logoBoxs {
		
		background-color: #fff;
		border: 1rpx solid #ccc;
		position: absolute;
		right: 0;
		top: -16rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.logoBoxs,
	.logos {
		width: 110rpx;
		height: 110rpx;

	}

	.logoBox,
	.logo {
		width: 80rpx;
		height: 80rpx;
	}

	.logoBoxList,
	.logoList {
		width: 80rpx;
		height: 80rpx;
		border-radius: 10rpx;
	}

	.storePop {
		width: 100%;
		background-color: #fff;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		border-radius: 10rpx 10rpx 0 0;
	}

	.title {
		font-size: 36rpx;
		color: #000;
		font-weight: bold;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.StoreBox {
		width: 100%;
		padding-top: 20rpx;
		max-height: 800rpx;
		overflow: scroll;
	}

	.StoreList {
		border: 1rpx solid #e6e6e6;
		border-radius: 6rpx;
		width: 100%;
		height: 120rpx;
		background-color: #fff;
		padding: 30rpx 20rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.Active {
		border: 1rpx solid var(--color);
	}

	.StoreName {
		max-width: 200rpx;
		font-size: 26rpx;
		color: #000;
		font-weight: bold;

	}

	.newList {
		width: 100%;
		padding: 30rpx 20rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		position: relative;
		border-bottom: 1rpx solid #f8f8f8;
	}

	.storeName {
		width: 560rpx;
	}

	.switchBtn {
		width: 130rpx;
		height: 44rpx;
		background-color: var(--color);
		border-radius: 22rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 24rpx;
	}

	.switchContact {
		position: relative;
	}

	.switchContact::after {
		content: '';
		width: 1px;
		height: 40rpx;
		background-color: #ccc;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translate(0, -50%);
	}

	.Direct {
		border: 1rpx solid var(--color);
		color: var(--color);
		padding: 0rpx 6rpx;
		font-size: 20rpx;
		margin-right: 10rpx;
	}
</style>